import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import { Card, Form, Input, Button, message, Select, InputNumber } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { createStyles } from 'antd-style';
import { positionDetail,positionUpdate } from '@/services/system/postmanagement';

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
  },
  card: {
    borderRadius: '8px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
  },
  form: {
    maxWidth: '800px',
    margin: '0 auto',
  },
  formItem: {
    marginBottom: '24px',
    '& .ant-form-item-label': {
      fontWeight: 500,
    },
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '16px',
    marginTop: '40px',
  },
  formLayout: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '24px',
  },
  fullWidth: {
    gridColumn: '1 / -1',
  },
}));

const PostManagementEdit: React.FC = () => {
  console.log('1111111111111111111111111');
  const { styles } = useStyles();
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const location = useLocation();
  const { record } = location.state || {};
  console.log('record11:', record);
  useEffect(() => {
    const fetchData = async () => {
      if (!record?.id) return;

      try {
        const detailRes = await positionDetail({ positionId: record.id });
        console.log('detailRes:', detailRes);

        if (detailRes.code === 200) {
          form.setFieldsValue({
            positionName: detailRes.data.positionName,
            sort: detailRes.data.sort,
            description: detailRes.data.description,
          });
        } else {
          message.error('获取岗位详情失败');
          navigate('/system/menu/post/list');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        message.error('获取数据失败');
        navigate('/system/postmanagement/list');
      }
    };

    fetchData();
  }, [record, form, navigate]);

  const onFinish = async (values: any) => {
    try {
      const params = {
        ...values,
        id: record?.id
      };
      const response = await positionUpdate(params);
      if (response.code === 200) {
        message.success('修改岗位成功');
        navigate('/system/postmanagement/list');
      } else {
        message.error(response.msg || '修改岗位失败');
      }
    } catch (error) {
      console.error('提交失败:', error);
      message.error('修改岗位失败');
    }
  };

  const handleCancel = () => {
    navigate('/system/postmanagement');
  };

  return (
    <PageContainer
      header={{
        title: '岗位修改',
      }}
    >
      <div className={styles.container}>
        <Card className={styles.card}>
          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            className={styles.form}
          >
            <div className={styles.formLayout}>
              <Form.Item
                name="positionName"
                label="岗位名称："
                rules={[{ required: true, message: '请输入岗位名称' }]}
                className={styles.formItem}
              >
                <Input placeholder="请输入岗位名称" />
              </Form.Item>
              <Form.Item
                name="sort"
                label="岗位排序："
                rules={[{ required: true, message: '请输入岗位排序' }]}
                className={styles.formItem}
              >
                <InputNumber min={1} placeholder="请输入岗位排序" style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item
                name="description"
                label="岗位描述："
                className={`${styles.formItem} ${styles.fullWidth}`}
              >
                <Input.TextArea
                  rows={4}
                  placeholder="请输入岗位描述"
                />
              </Form.Item>
            </div>

            <div className={styles.buttonGroup}>
              <Button onClick={handleCancel}>
                返回
              </Button>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </div>
          </Form>
        </Card>
      </div>
    </PageContainer>
  );
};

export default PostManagementEdit;

